<template>
  <el-row>
    <!--  弹出模态框 start-->
    <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogVisible"
        title="创建题目"
        width="30%">
      <el-form ref="ruleForm" :model="ruleForm" label-width="50px" status-icon>
        <el-form-item label="标题" prop="pass">
          <el-input v-model="ruleForm.title" autocomplete="off" type="text"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="checkPass">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分数" prop="fraction">
          <el-input v-model.number="ruleForm.fraction"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="ruleForm.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="status">
          <el-cascader
              v-model="CascaderContent"
              :options="Types"
              :props="{ expandTrigger: 'hover' }"
              :show-all-levels="false"
              @change="OnCascader"></el-cascader>
        </el-form-item>
        <el-form-item v-if="CascaderContent[0] === 'ssh'" label="类型" prop="status">
          <el-switch
              v-model="osStatus"
              disabled
              active-text="Windows"
              inactive-text="Linux">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="CascaderContent[0] === 'ssh'" label="实操">
          <el-select v-model="cloudContent" placeholder="请选择">
            <el-option
                v-for="item in cloud"
                :key="item.key"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="CascaderContent[0] === 'firewall'" label="实操">
          <el-select v-model="cloudContent" placeholder="请选择">
            <el-option
                v-for="item in cloud"
                :key="item.key"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="CascaderContent[0] === 'jiaohuanji'" label="实操">
          <el-select v-model="cloudContent" placeholder="请选择">
            <el-option
                v-for="item in cloud"
                :key="item.key"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="CascaderContent[0] === 'awvs'" label="实操">
          <el-select v-model="cloudContent" placeholder="请选择">
            <el-option
                v-for="item in cloud"
                :key="item.key"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="CascaderContent[0] === 'ordinary'" label="附件" prop="file">
          <el-upload
              :before-remove="beforeRemove"
              :file-list="fileList"
              :limit="1"
              :on-success="success"
              :with-credentials='true'
              action="/v2/api/upload"
              multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip">只能上传zip压缩包。</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="flag" prop="answer">
          <el-input v-model="ruleForm.answer" autocomplete="off" type="text"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="NewTask">创建题目</el-button>
  </span>
    </el-dialog>
    <!--  弹出模态框 end-->
    <!--  题目编辑 start-->
    <el-dialog
        :before-close="editTaskClose"
        :visible.sync="editTask"
        title="详情信息"
        width="30%">
      <el-form ref="ruleForm" :model="ruleForm" label-width="50px" status-icon>
        <el-form-item label="标题" prop="pass">
          <el-input v-model="ruleForm.title" autocomplete="off" type="text" :disabled="editTask"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="checkPass">
          <el-select v-model="value" placeholder="请选择" :disabled="editTask">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分数" prop="fraction">
          <el-input v-model.number="ruleForm.fraction" :disabled="editTask"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="ruleForm.content" type="textarea" :disabled="editTask"></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="file">
          <el-upload
              :before-remove="beforeRemove"
              :file-list="fileList"
              :limit="1"
              :on-success="success"
              :with-credentials='true'
              action="/v2/api/upload"
              multiple>
          </el-upload>
        </el-form-item>
        <el-form-item label="flag" prop="answer">
          <el-input v-model="ruleForm.answer" autocomplete="off" type="text" :disabled="editTask"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
    <el-button type="primary" @click="editTask = false">确定</el-button>
  </span>
    </el-dialog>
    <!--  题目编辑 end-->
    <el-col :span="24">
      <el-button size="medium" type="primary" @click="dialogVisible = true">创建题目</el-button>
    </el-col>
    <el-col :span="24">
      <el-table
          :data="tableData"
          height="700"
      >
        <el-table-column
            label="标题"
            prop="title"
        >
        </el-table-column>
        <el-table-column
            label="类型"
            prop="category"
        >

        </el-table-column>
        <el-table-column
            label="发布日期"
            prop="date"
        >
        </el-table-column>
        <!--        <el-table-column-->
        <!--            label="发布人员"-->
        <!--            prop="name"-->
        <!--        >-->
        <!--        </el-table-column>-->
        <el-table-column
            label="所属分类"
            prop="tab"
        >
        </el-table-column>
        <el-table-column
        >
          <template slot="header" slot-scope="{}">
            <el-input
                placeholder="输入关键字搜索"
                size="mini"/>
          </template>
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="userEdit(scope.$index)">查看
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="userDelete(scope.$index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Topic",
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      editTask: false,
      ruleForm: {
        title: '',
        fraction: '',
        content: '',
        answer: ''
      },
      options: [],
      value: '',
      cloud: [],
      cloudContent: '',
      fileList: [],
      Types: [
        {
          value: 'ordinary',
          label: '普通题目'
        },
        {
          value: 'ssh',
          label: 'SSH连接',
          children: [
            {
              value: 'windows',
              label: 'Windows系统'
            },
            {
              value: 'linux',
              label: 'Linux系统'
            }
          ],
        },
        {
          value: 'firewall',
          label: '防火墙'
        }, {
          value: 'jiaohuanji',
          label: '交换机'
        }, {
          value: 'awvs',
          label: 'AWVS'
        },
      ],
      CascaderContent: '',
      upload: "",
      osStatus: false,
      // action: this.$axios2.get('/upload')
    }
  },
  // 前端渲染完成前的生命周期
  mounted() {
    function formatDate(date) {
      let d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;
      return [year, month, day].join('-');
    }

    // 获取题目分类
    this.$axios2.post("/sort/list").then((res) => {
      let data = res.data.sortList
      for (let i = 0; i < data.length; i++) {
        let list = {}
        list.value = data[i].name
        list.label = data[i].name
        this.options.push(list)
      }
    })
    // 获取题目列表
    this.$axios2.post("/task").then((res) => {
      let code = res.data.code
      let data = res.data.taskList
      let date = ''
      if (code === 200) {
        for (let i = 0; i < data.length; i++) {
          let list = {}
          let category = ''
          list.title = data[i].title
          if (data[i].category === 'ordinary') {
            category = '普通题'
          } else if (data[i].category === 'ssh') {
            category = '实操题'
          } else if (data[i].category === 'firewall') {
            category = '防火墙'
          } else if (data[i].category === 'jiaohuanji') {
            category = '交换机'
          } else if (data[i].category === 'awvs') {
            category = 'AWVS'
          }
          list.category = category
          list.tab = data[i].sort
          date = data[i].CreatedAt
          list.date = formatDate(date)
          this.tableData.push(list)
        }
      }

    })
    // 获取VPS模板列表
    this.$axios2.post('/allTemplate').then((res) => {
      let data = res.data.allTemplate
      let num = data.length
      for (let i = 0; i < num; i++) {
        let list = {}
        list.key = data[i].title
        list.name = data[i].title
        this.cloud.push(list)
      }
    })
  },
  methods: {
    userEdit: function (index) {
      let name = this.tableData[index].title
      let tab = this.tableData[index].tab
      this.editTask = true
      this.$axios2.post('/task/editInfo', {
        'title': name,
        'sort': tab,
      }).then((res) => {
        let code = res.data.code
        if (code === 200) {
          let data = res.data.data
          let list = {}
          this.ruleForm.title = data.title
          this.ruleForm.content = data.content
          this.value = data.sort
          this.ruleForm.fraction = data.fraction
          this.ruleForm.answer = data.flag
          if (data.file === "") {
            this.fileList = []
          } else {
            list.name = data.file
            list.url = "/upload/" + data.file
            this.fileList.push(list)
          }
          console.log(data, this.fileList)
        } else {
          this.$message.error('数据异常！请联系管理员。');
        }
      })
    },
    userDelete: function (i) {
      let name = this.tableData[i].title
      let sortName = this.tableData[i].tab
      this.$axios2.post('/task/delete', {
        'title': name,
        'sort': sortName,
      }).then((res) => {
        let code = res.data.code
        if (code === 200) {
          this.$router.go(0)
        }
      })
      console.log(name, sortName)
    },
    handleClose() {
      this.dialogVisible = false
    },
    editTaskClose() {
      this.editTask = false
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    success: function (code, fileList) {
      this.upload = fileList.name
    },
    // 创建新的题目
    NewTask: function () {
      if (this.CascaderContent[0] === 'ordinary') {
        this.$axios2.post("/task/new", {
          "title": this.ruleForm.title,
          "sort": this.value,
          "fraction": this.ruleForm.fraction,
          "content": this.ruleForm.content,
          "category": this.CascaderContent[0],
          "file": this.upload,
          "flag": this.ruleForm.answer
        }).then((res) => {
          let code = res.data.code
          if (code === 200) {
            this.$router.go(0)
            this.dialogVisible = false
            this.$message({
              message: "创建成功!",
              type: 'success'
            });
          }
        })
      } else if (this.CascaderContent[0] === 'ssh') {
        this.$axios2.post("/task/new", {
          "title": this.ruleForm.title,
          "sort": this.value,
          "fraction": this.ruleForm.fraction,
          "content": this.ruleForm.content,
          "category": this.CascaderContent[0],
          "osStatus": this.osStatus,
          "topicEnvironment": this.cloudContent,
          "flag": this.ruleForm.answer
        }).then((res) => {
          let code = res.data.code
          if (code === 200) {
            this.$router.go(0)
            this.dialogVisible = false
            this.$message({
              message: "创建成功!",
              type: 'success'
            });
          }
        })
      } else if (this.CascaderContent[0] === 'jiaohuanji') {
        this.$axios2.post("/task/new", {
          "title": this.ruleForm.title,
          "sort": this.value,
          "fraction": this.ruleForm.fraction,
          "content": this.ruleForm.content,
          "category": this.CascaderContent[0],
          "osStatus": this.osStatus,
          "topicEnvironment": this.cloudContent,
          "flag": this.ruleForm.answer
        }).then((res) => {
          let code = res.data.code
          if (code === 200) {
            this.$router.go(0)
            this.dialogVisible = false
            this.$message({
              message: "创建成功!",
              type: 'success'
            });
          }
        })
      } else if (this.CascaderContent[0] === 'awvs') {
        this.$axios2.post("/task/new", {
          "title": this.ruleForm.title,
          "sort": this.value,
          "fraction": this.ruleForm.fraction,
          "content": this.ruleForm.content,
          "category": this.CascaderContent[0],
          "osStatus": this.osStatus,
          "topicEnvironment": this.cloudContent,
          "flag": this.ruleForm.answer
        }).then((res) => {
          let code = res.data.code
          if (code === 200) {
            this.$router.go(0)
            this.dialogVisible = false
            this.$message({
              message: "创建成功!",
              type: 'success'
            });
          }
        })
      } else if (this.CascaderContent[0] === 'firewall') {
        this.$axios2.post("/task/new", {
          "title": this.ruleForm.title,
          "sort": this.value,
          "fraction": this.ruleForm.fraction,
          "content": this.ruleForm.content,
          "category": this.CascaderContent[0],
          "topicEnvironment": this.cloudContent,
          "flag": this.ruleForm.answer
        }).then((res) => {
          let code = res.data.code
          if (code === 200) {
            this.$router.go(0)
            this.dialogVisible = false
            this.$message({
              message: "创建成功!",
              type: 'success'
            });
          }
        })
      }
    },
    OnCascader(value) {
      if (value[0] === 'ssh') {
        if (value[1] === 'linux') {
          this.osStatus = false
        } else {
          this.osStatus = true
        }
      }
    }
// 更新题目
//     EditTask() {
//       this.$message.error('更新功能未完善！');
//       // this.$axios2.post("/task/edit", {
//       //   "title": this.ruleForm.title,
//       //   "sort": this.value,
//       //   "fraction": this.ruleForm.fraction,
//       //   "content": this.ruleForm.content,
//       //   "file": this.upload,
//       //   "flag": this.ruleForm.answer
//       // }).then((res) => {
//       //   console.log(res)
//       //   let code = res.data.code
//       //   if (code === 200) {
//       //     this.$router.go(0)
//       //     this.editTask = false
//       //     this.$message({
//       //       message: "更新成功!",
//       //       type: 'success'
//       //     });
//       //   }
//       // })
//     },
  }
}
</script>

<style scoped>

</style>